<script>
/**
 * @example
 * @props_param_one request
 * {
 *    url: https://example.com:0000/api/get_list,
 *    method: 'get | post',
 *    params: { page: 1, pageSize: 10 }
 * }
 * @props_param_two request
 * const request = function () {}
 */

const r_array =
    (r = []) =>
    () =>
        [...r]
const r_object =
    (o = {}) =>
    () => ({ ...o })

export default {
    props: {
        // 表头行
        columns: {
            type: Array,
            default: r_array()
        },
        // 网络请求
        request: {
            type: Object,
            default: null
        },
        // 是否开启分页请求
        isPaging: {
            type: Boolean,
            default: false
        },
        // 默认分页请求参数
        defaultPagingParams: {
            type: Object,
            default: r_object({ page: 1, pageSize: 20 })
        },
        // key
        rowKey: {
            type: String,
            default: 'id'
        },
        // 数据源
        dataSource: {
            type: Array,
            default: r_array()
        },
        data: {
            type: Array,
            default: r_array()
        },
        // 具体配置项
        opts: {
            type: Object,
            default: r_object()
        },
        // 调试模式
        isDev: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            h_request: {
                value: null,
                type: 'object'
            },
            h_body_list: []
        }
    },
    created() {
        const { request } = this.$props
        if (typeof request === 'function') {
            this.h_request = {
                value: request,
                type: 'function'
            }
        }
        if (request != null && typeof request === 'object') {
            const val = {
                url: request.url || '',
                method: request.method || 'get',
                params: request.params || {}
            }
            this.h_request = {
                value: val,
                type: 'object'
            }
        }
        this.created_handleBodyList()
        console.log('🌈 —— data-request --->', request)
    },
    mounted() {},
    methods: {
        created_handleBodyList() {
            const { columns, data, dataSource } = this.$props
            const body_list = columns.map((col, index) => {
                return { prop: col.prop, label: col.label, id: index }
            })
            this.h_body_list = body_list
        },
        getSource() {
            return this.$props.dataSource
        }
    }
}
</script>

<template>
    <div class="h-table-warp">
        <table
            class="h-table"
            role="table"
            border
        >
            <thead class="h-thead">
                <tr class="h-thead-tr">
                    <th
                        v-for="(item, index) in columns"
                        :key="index"
                        class="h-thead-th"
                        scope="col"
                    >
                        {{ item.label }}
                    </th>
                </tr>
            </thead>
            <tbody class="h-tbody">
                <tr
                    class="h-tbody-tr"
                    v-for="(row, index) in getSource()"
                    :key="index"
                >
                    <td
                        class="h-tbody-td"
                        v-for="item in h_body_list"
                        :key="item.id"
                    >
                        {{ row[item.prop] }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style scoped>
.h-table-warp {
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    position: relative;
    overflow-x: auto;
    box-sizing: border-box;
}

.h-table-warp > .h-table {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border-collapse: collapse;
    text-align: left;
    box-sizing: border-box;
}

.h-thead {
    color: rgb(156 163 175 / 1);
    background-color: rgb(51 51 51 / 1);
}

.h-thead-th {
    font-size: 0.75rem;
    line-height: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.h-tbody-tr {
    /* #232323 */
    background-color: rgb(35 35 35 / 1);
    border-bottom-color: rgb(40 40 40 / 1);
    color: #9ca3af;
    cursor: pointer;
}

.h-tbody-td {
    font-size: 0.75rem;
    line-height: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
</style>
